<template>
  <div style="width: 100%">
    <div v-if="PagerTypeString.name === '新品'">
      <div
        class="fruit_list"
        :class="{ active: isThird }"
      >
        <div
          v-for="(cate, newgoods) in NewGoodsList"
          :key="newgoods"
          class="cate-item"
          @click="goDetail(cate.goods)"
        >
          <div class="huodong_div">
            <img
              :src="cate.goods.fullDefaultImageUrl"
              alt=""
              class="goods-img"
            >
          </div>
          <div class="fruit_detail">
            <div>
              <div class="title">
                {{ cate.goods.cName }}
              </div>
              <div>
                <span class="money">￥</span>
                <span class="price">{{ cate.goods.fSalePrice }}</span>
                <span class="haspay">{{ cate.goods.iSales }}人已付款</span>
              </div>
            </div>
            <img
              :src="cate.isZanStatus == 1 ? iszanImg : zanImg"
              alt=""
              @click="zan(cate)"
            >
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="lastPage > page"
      class="more"
      @click="getMore"
    >
      点击加载更多+
    </div>
    <div
      v-else
      class="more"
    >
      没有更多
    </div>
  </div>
</template>

<script>
import defaultImg from "../../assets/img/tao.png";
import activeImg from "../../assets/img/classify2.png";
import zanImg from "../../assets/img/zan.png";
import iszanImg from "../../assets/img/zan_selected.png";
export default {
  name: "",
  components: {},
  props: ["isThird"],
  data() {
    return {
      zanImg: zanImg,
      iszanImg: iszanImg,
      isZan: false,
      zanList: [],
      goodsList: [],
      classifyId: "",
      keywords: "",
      page: 1,
      lastPage: 0,
      type: "",
      activityid: "",
      order: "iOrder",
      day:'', // 上新时间
      PagerTypeString: '', // 页面类型/板块判断条件
      NewGoodsList: [], // 新品列表
    };
  },
  watch: {},
  created() {
    this.type = this.$route.query.type;
    this.activityid = this.$route.query.activityid;
  },
  mounted() {},
  methods: {
    over(item) {
      this.$set(item, "img", activeImg);
    },
    leave(item) {
      this.$set(item, "img", defaultImg);
    },
    zan(item) {
      this.isZan = !this.isZan;
      if (item.isZanStatus == 0) {
        this.$set(item, "isZanStatus", 1);
        this.zanList.push(item.id);
        console.log(item.id);
      } else {
        this.$set(item, "isZanStatus", 0);
        let index = this.zanList.indexOf(item.id);
        this.zanList.splice(index, 1);
      }
      console.log(this.zanList);
      // this.$emit('zan',item.id)
    },
    //跳转商品详情
    goDetail(item) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: item.id,
          iShopId: item.iShopId
        },
      });
    },
    // 获取数据
    PagerType(PagerType) {
      console.log('获取数据', PagerType)
      this.PagerTypeString = PagerType// 页面类型/板块判断条件
      // 根据传来的参数判断不同接口返回不同列表
      /* 
      * @PagerType object
      * ChangeType // 排序
      * input1 // 搜索内容
      * name // 导航名称
      * select 搜索类型
      * type:  导航id
      * ShopID: 店铺id
      */
      if(PagerType.name === '热销') {
        console.log('热销')
        this.page = 1;
      } else if(PagerType.name === '新品') {
        console.log('新品11')
        this.page = 1;
        this.GetShopNewGoodsAPI(PagerType.ShopID)
      } else if(PagerType.name === '商品') {
        console.log('商品')
        this.page = 1;
      }
    },
    // 获取新品API
    GetShopNewGoodsAPI(ShopID) {
      let params = {
        shop_id:	ShopID, // 是	int	店铺id
        limit:20, // 是	int
        page: this.page
      }
      this.$api.commit.GetShopNewGoods(params).then((res) => {
        console.log('获取新品API', res)
        this.day = res.data.day
        this.NewGoodsList = res.data.data
        this.lastPage = res.data.last_page
        // 获取商品详情
       res.data.data.forEach(element => {
         this.getGoods(element)
       })
      })
    },
    // 获取新品商品详情
    getGoods(getGoods) {
      let params = {
        token: localStorage.getItem('token'),
        data: {
          id: getGoods.goods_id
        }
      }
      this.$api.good.getGoodDetail(params).then(res => {
        this.$set(getGoods,'goods',res.data)
      })
    },
    // 商品列表搜索用this.classifyId, this.keywords
    /*
    *classifyId 分类id
    *keywords 搜索字段
    */
    getList(classifyId, keywords) {
      console.log('商品列表搜索用', classifyId, keywords)
    },
    // getList(classifyId, keywords, page) {
    //   if (page == 1) {
    //     this.goodsList = [];
    //   }
    //   this.classifyId = classifyId;
    //   this.keywords = keywords;
    //   this.page = page;
    //   let data = {
    //     queryCondition: {
    //       order: [
    //         {
    //           fieldname: this.order,
    //           direction: "asc",
    //         },
    //       ],
    //       pageindex: this.page,
    //       pagesize: 16,
    //       where: [
    //         {
    //           fieldname: "categoryid",
    //           valuefrom: this.classifyId,
    //         },
    //         {
    //           fieldname: "keyword",
    //           valuefrom: this.keywords,
    //         },
    //       ],
    //     },
    //   };
    //   if (this.type) {
    //     console.log(this.type);
    //     let head = "";
    //     if (this.type == 1) {
    //       head = "PP";
    //     }
    //     if (this.type == 3) {
    //       head = "GP";
    //     }
    //     if (this.type == 7) {
    //       head = "TP";
    //     }
    //     if (this.type == 11) {
    //       head = "HP";
    //     }
    //     if (this.type == 2) {
    //       head = "GB";
    //     }
    //     data.queryCondition.where.push({
    //       fieldname: "promotionActivityId",
    //       valuefrom: head + this.activityid,
    //     });
    //   }
    //   this.$api.home.getProductList(data).then((res) => {
    //     if (res.code == 200) {
    //       this.goodsList = this.goodsList.concat(res.data.data);
    //     }
    //   });
    // },
    // 加载更多
    getMore() {
      this.page++;
      if(this.PagerTypeString.name === '热销') {
        console.log('热销-------------加载更多')
      } else if(this.PagerTypeString.name === '新品') {
        console.log('新品-------------加载更多')
        this.GetShopNewGoodsAPI(this.PagerTypeString.ShopID)
      } else if(this.PagerTypeString.name === '商品') {
        console.log('商品-------------加载更多')
      }
    },
    setType(value) {
      this.order = value;
      this.page = 1;
      this.getList(this.classifyId, this.keywords, this.page);
    },
    
  },
};
</script>

<style scoped lang="scss">
.fruit_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;

  .cate-item {
    width: 23%;
    height: 28.13rem;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 1.88rem;
    margin-right: 1.59rem;

    &:nth-child(4n) {
      margin-right: 0;
    }

    &:hover {
      -webkit-box-shadow: 0px 3px 10px #c8c8c8;
      -moz-box-shadow: 0px 3px 10px #c8c8c8;
      box-shadow: 0px 3px 10px #c8c8c8;
    }

    div.huodong_div {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      height: 20.63rem;

      .goods-img {
        width: 15.5rem;
        height: 15.5rem;
        object-fit: contain;
      }

      .huodong {
        // width: 14.5rem;
        height: 3.56rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background: url(../../assets/img/fruit_huodong.png) no-repeat left top;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        padding: 0 2.5rem 0 2.15rem;

        .leftBox {
          width: 4.5rem;
          height: 2.44rem;
          font-size: 1.13rem;
          line-height: 1.39rem;

          > span {
            font-size: 0.8rem;
          }
        }

        .rightBox {
          font-size: 1rem;
          line-height: 1.95rem;
        }
      }
    }

    .fruit_detail {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.75rem 3.25rem 1.94rem;

      // width: 17.01rem;
      img {
        width: 1.5rem;
        height: 1.37rem;
      }

      .title {
        font-size: 1.38rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(68, 68, 68, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-bottom: 0.5rem;
        max-width: 13rem;
      }

      .money {
        font-size: 0.8rem;
        color: #f03f6e;
      }

      .price {
        color: #f03f6e;
        font-size: 1.37rem;
        margin-right: 0.44rem;
      }

      .haspay {
        font-size: 1rem;
        color: #999;
      }
    }
  }
}

.more {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 1.95rem;
  text-align: center;
  margin: 3.13rem auto;
  cursor: pointer;
}
</style>
